/**
 * zustand 的 subscribe，可以订阅一个状态，当状态变化时，会触发回调函数
 * 只要store 的 state 发生变化，就会触发回调函数，
 * 另外就是这个订阅可以在组件内部订阅，也可以在组件外部订阅,如果在组件内部订阅需要放到useEffect中,防止重复订阅。
 * @returns
 */

import { useStore, useStore2 } from "@/store/index";
import { useEffect, useState } from "react";
import TestDemo from "./testDemo";
import TestDemo2 from "./testDemo2";
export default function Subcribe() {
  console.log("Subcribe--组件渲染");
  const [state, setState] = useState("工作");

  useEffect(() => {
    // 监听单个值变化
    useStore.subscribe((state) => {
      console.log("状态变化了11==>");
      if (state.count > 5) {
        setState("下班");
      }
    });
  }, []);

  // 订阅单个变化
  useEffect(() => {
    // 监听单个值变化
    // useStore2.subscribe(
    //   (state) => state.count,
    //   (count, prevCount) => {
    //     console.log("只有count变化才会执行==>", count, prevCount);
    //     if (count > 5) {
    //       setState("下班lalalla");
    //     }
    //   }
    // );
    // 监听单个值变化，支持第三个参数
    useStore2.subscribe(
      (state) => state.count,
      (count, prevCount) => {
        console.log("只有count变化才会执行==>", count, prevCount);
        if (count > 5) {
          setState("下班lalalla");
        }
      },
      {
        // equalityFn: (a, b) => a === b, // 默认是浅比较，如果需要深比较，可以传入一个比较函数
        // fireImmediately: true, // 默认是false，如果需要立即触发，可以传入true
      }
    );
  }, []);

  return (
    <div>
      <h1>Subcribe</h1>
      <p>Subcribe</p>
      <p>state:{state}</p>
      <TestDemo></TestDemo>
      <TestDemo2></TestDemo2>
    </div>
  );
}
